<template>
  <div
    class="map-toolbar-container"
    :style="{ width: !visible ? '34px' : '514px' }"
  >
    <div class="item arrow" @click="hanldeVisible">
      <i :class="visible ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
    </div>
    <div class="flex" :style="{ width: !visible ? '0px' : '480px' }">
      <div
        v-for="(item, index) in tools"
        :key="index"
        :class="['item', item.check ? 'active' : '']"
        @click.stop="handleAction(item)"
      >
        <div v-if="item.type !== 'draw-tool'">
          <span class="icon">
            <svg-icon :icon-class="item.icon"></svg-icon>
          </span>
          <span class="text">
            {{ item.text }}
          </span>
        </div>
        <div v-else>
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="text">
              <svg-icon :icon-class="drawIcon"></svg-icon>
              {{ drawToolTitle
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(value, key) in drawMap"
                :key="key"
                :command="key"
              >
                <img
                  class="img-icon is-always-shadow"
                  :src="value.icon"
                  alt=""
                />
                {{ value.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Distance, Area, ClickSearch, clickSpaceSearch } from './measure'
import { clearGrayBuilding } from '@/utils/handleLayer'
import { getBasemap } from '@/api/basemap'
export default {
  inject: ['map', 'spaceSearchDom'],
  name: 'map-toolbar',
  components: {},
  template: {},
  props: {
    timeLineLayers: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      visible: true,
      tools: [
        {
          check: false,
          icon: 'map-distance',
          text: '距离测量',
          key: '_distance',
          type: 'measure-distance',
        },
        {
          check: false,
          icon: 'map-area',
          text: '面积测量',
          key: '_area',
          type: 'measure-area',
        },
        {
          check: false,
          icon: 'map-click-search',
          key: '_clickSearch',
          text: '属性查询',
          type: 'click-search',
        },
        // {
        //   check: false,
        //   icon: 'map-area',
        //   key: '_spaceSearch',
        //   text: '空间查询',
        //   type: 'space-search',
        // },
        {
          type: 'draw-tool',
          text: 'draw',
        },
        {
          icon: 'map-delete',
          text: '清除',
          noEvent: true,
          type: 'clear-draw',
        },
      ],
      drawToolTitle: '切换底图',
      drawIcon: 'basetoggle',
      drawMap: window.BASE_STYLE,
      activeIndex: 0,
    }
  },
  methods: {
    hanldeVisible() {
      this.visible = !this.visible
      this.$emit('visible', this.visible)
    },
    handleCommand(index) {
      console.log('index :>> ', index)
      if (this.activeIndex === index) {
        // 同一底图无需重新加载
        return false
      }
      this.activeIndex = index
      // console.log('this.drawMap', this.drawMap);
      let layer = this.drawMap[index]
      console.log('layer :>> ', layer)
      // 切换底图
      const { url } = layer
      if (url) {
        const baseStyle = '底图'
        if (this.map.getStyle(baseStyle)) {
          this.map.removeStyle(baseStyle)
        }
        this.map.addStyle(baseStyle, url, {
          before: 'bottom',
          onload: (e) => {
            console.log('e :>> ', e)
            if (e.name === '中文地图-copy') {
              clearGrayBuilding(this.map)
            } else if (e.name === 'ZHSQDT_IMAGE') {
              console.log('this.map :>> ', this.map)
            }
          },
        })
      }
    },
    // 点击
    handleAction(item) {
      // noEvent 处理
      if (item.noEvent) {
        this.tools.forEach((i) => {
          if (i.key) {
            i.check = false
            this.map[i.key] && this.map[i.key].destroy()
          }
          if (i.check) {
            i.check = false
          }
        })

        item.check = !item.check
        return false
      }
      // 保留当前，去掉其它的状态
      this.tools.forEach((i) => {
        if (i.type !== item.type && i.check) {
          i.check = false
          // 去掉当前的事件
          this.removeEvent(i)
          if (this.draw) {
            // 清除绘画
            this.draw.deleteAll()
            this.map.removeControl(this.draw)
            this.draw = null
          }
        }
      })
      item.check = !item.check

      if (item.check) {
        // 绑定对应的事件
        this.bindEvent(item)
      } else {
        // 清除对应的事件
        this.removeEvent(item)
      }
      // // 清除画面
      // if(this.map._clickSpaceSearch) {
      //   this.map._clickSpaceSearch.destroy();
      // }
    },
    bindEvent(item) {
      // 测距
      if (item.type === 'measure-distance') {
        if (!this.map._distance) {
          this.map._distance = new Distance(this.map)
          this.map._distance.init()
        } else {
          this.map._distance.init()
        }
      } else if (item.type === 'measure-area') {
        // 侧面
        if (!this.map._area) {
          this.map._area = new Area(this.map)
          this.map._area.init()
        } else {
          this.map._area.init()
        }
      } else if (item.type === 'click-search') {
        // 点击查询
        console.log('点击查询')
        if (!this.map._clickSearch) {
          this.map._clickSearch = new ClickSearch(
            this.map,
            this.timeLineLayers,
            false
          )
          this.map._clickSearch.init()
        } else {
          this.map._clickSearch.init()
        }

        // 更换popup
        console.log(this.$refs.popupDom)
        this.map._clickSearch.createPopupDom = () => {
          // let div = document.createElement('div')
          // div.innerHTML = 'sssss'
          // return div
          return this.$refs.popupTest.$el
        }
      } else if (item.type === 'space-search') {
        if (!this.map.clickSpaceSearch) {
          const layers = this.timeLineLayers
          this.map._clickSpaceSearch = new clickSpaceSearch(this.map, layers)
          this.map._clickSpaceSearch.init()
        } else {
          this.map._clickSpaceSearch.init()
        }
      }
    },
    removeEvent(item) {
      if (item.type === 'measure-distance') {
        this.map._distance.destroy()
      } else if (item.type === 'measure-area') {
        this.map._area.destroy()
      } else if (item.type === 'click-search') {
        // 清除点击查询
        this.map._clickSearch.destroy()
      } else if (item.type === 'space-search') {
        this.map._spaceSearch.destroy()
      }
    },
  },
  beforeCreate() {
    getBasemap().then((res) => {
      if (res.success) {
        this.drawMap = res.data.map((i) => {
          return {
            active: i.isDefault === 1,
            url: i.serviceUrl,
            icon: i.fileUrl,
            name: i.serviceName,
          }
        })
      }
    })
  },
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  transition: width 1s;
  height: 35px;
}
@mixin activeItem {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}
.map-toolbar-container {
  height: 35px;
  overflow: hidden;
  position: absolute;
  transition: width 1s;
  top: 10px;
  right: 10px;
  background: pink;
  display: flex;
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  .item {
    &.active {
      /* background-color: #f5f5f5; */
      border: 1px solid #ddd;
    }
    border: 1px solid transparent;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    &:nth-child(n + 2) {
      border-left: 1px solid #f1f1f1;
    }
    .text {
      padding: 0 2px;
      font-size: 14px;
      font-family: PingFang SC;
      color: #333333;
      opacity: 1;
    }
    &.active,
    &:hover {
      @include activeItem();
    }
  }
}
::v-deep .el-dropdown-menu__item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.img-icon {
  height: 40px;
  margin-right: 10px;
}
</style>
